<template>
    <div class="header">
        <van-icon @click="goBack" name="arrow-left" style="margin:0 .3rem 0 0;" />管理收货地址
    </div>

    <!-- 地址列表，开始 -->
    <div class="addressList" v-for="n in addressList.arr" :key="n.addressId">
        
        <div class="item">
            <p>{{ n.name }}<em>{{ n.tel }}</em></p>
            <p>{{ n.province }} - {{ n.city }} - {{ n.county }} - {{ n.addressDetail }}</p>
        </div>
        <div class="btn">
            <span class="address">
                <!-- <van-checkbox shape="square" v-model="isCheckbox">默认地址</van-checkbox> -->
                <defaultAddress :isDefault="n.isDefault" />
            </span>
            <span class="delete" @click="delAddressEvent(n.addressId)">
                <van-icon size=".5rem" name="delete-o" >删除</van-icon>
            </span>
            <span class="edit" @click="editAddressEvent(n.addressId)">
                <van-icon size=".5rem" name="records">编辑</van-icon>
            </span>
        </div>
        
    </div>
    <!-- 地址列表，结束 -->
    <!-- 新增收货地址 -->
    <div class="footer" @click="addAddress">
        <van-button type="primary" block round style="font-size: .6rem" color="#cf0a2c">+ 新增收货按钮</van-button>
    </div>
</template>
<script setup>   
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue'
import requestFn from '@/utils/https'
import defaultAddress from '@/components/defaultAddress'
import { getFn } from '@/utils/index'

const router = useRouter()
// 回到上一页
const goBack = () => {
    router.push({
        path: '/personal'
    })
}

// 设置为默认地址
let isCheckbox = ref(false)

// 新增收货地址
const addAddress = () => {
    router.push({
        path: '/addNewAddress'
    })
}

// 用户地址列表
let addressList = reactive({ 
    arr: [] 
})

// 打开页面，请求获得用户送货地址接口，mysql_getAddress
requestFn({
    url: '/mysql_getAddress',
    method: 'get',
}).then( res => {
    // console.log(res)
    addressList.arr = res.data
})

// 删除按钮
const delAddressEvent = (e) => {
    console.log(e)
    // requestFn({
    //     url: '/mysql_delAddress',
    //     method: 'get',
    //     data: { n: e}
    // }).then( res => {
    //     // console.log(res)

    //     // 删除之后，刷新页面
    //     requestFn({
    //         url: '/mysql_getAddress',
    //         method: 'get',
    //     }).then( res => {
    //         console.log(res)
    //         addressList.arr = res.data
    //     })
    // })

    // 改为promise形式，解决回调地址
    getFn('/mysql_delAddress', { n: e })
        .then(_d => {
            return getFn('/mysql_getAddress')
        })
        .then(_d => {
            console.log(_d.data)
            addressList.arr = _d.data;
        });
}

// 编辑用户地址的事件
const editAddressEvent = (_id) => {
    // console.log(e)

    // 跳转到修改页面
    router.push({
        // path:'/editAddress'
        name: 'editAddress',
        query: {
            addId: _id
        }
    })
}

</script>

<style lang="less" scoped>
.header {
    margin: 0 .5rem;
    height: 1rem;
    padding: .2rem 0;
    text-align: left;
    font-size: .6rem;
}.addressList {
    overflow: hidden;
    margin: .5rem;
    background-color: rgb(224, 217, 217);
    padding: .5rem;
    border-radius: .3rem;
    .item {
        p {
            text-align: left;
            font-size: .4rem;
            margin-left: 1rem;
            padding-bottom: .2rem;

            em {
                padding-left: .2rem;
            }
        }
    }

    .btn {
        overflow: hidden;
        padding: 0 1rem;
        padding-top: .4rem;

        .address {
            float: left;
        }

        span {
            float: right;
            font-size: .3rem;
        }

        .delete {
            margin-left: .4rem;
        }
    }
    
}

.footer {
    position: fixed;
    bottom: .25rem;
    width: 90%;
    left: 5%;
}
</style>
